<template>
  <el-main>
    <!--    导航栏-->
    <el-menu
      :default-active="activeIndex"
      class="el-menu-demo"
      mode="horizontal"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b">
      <el-menu-item index="1" @click="elmenu=true">合同信息</el-menu-item>
      <el-menu-item index="2" :disabled="elmenu">附件</el-menu-item>
      <el-menu-item index="3" :disabled="elmenu">付款单</el-menu-item>
    </el-menu>
    <!--   导航栏 结束 -->

    <!--    收房合同列表-->
    <el-dialog title="收房合同查询" :visible.sync="dialogTableVisible">
      <el-form :inline="true" :model="query" class="demo-form-inline">
        <el-form-item label="小区名称">
          <el-input v-model="query.premiseName" placeholder="小区名称模糊查询"></el-input>
        </el-form-item>
        <el-form-item label="业主姓名">
          <el-input v-model="query.ownerName" placeholder="业主名称模糊查询"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="contractPage">查询</el-button>
        </el-form-item>
      </el-form>

      <el-table :data="contracts">
        <el-table-column property="ownerName" label="业主姓名"></el-table-column>
        <el-table-column label="房产信息">
          <template slot-scope="scope" height="24">
            <p>{{ scope.row.premiseName }}({{ scope.row.houseName }})</p>
          </template>
        </el-table-column>
        <el-table-column label="租房类型">
          <template slot-scope="scope">
            <span v-if="scope.row.houseLeaseType == 1">合租</span>
            <span v-if="scope.row.houseLeaseType == 2">整租</span>
            <span v-if="scope.row.houseLeaseType == 3">公寓</span>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          width="120">
          <template slot-scope="scope">
            <el-button
              @click="pitch(scope.$index, scope.row)"
              type="text"
              size="small">
              选中
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        layout="prev, pager, next"
        @current-change="handleCurrentChange"
        :total="contractsTotal">
      </el-pagination>
    </el-dialog>

    <!--    合同信息-->
    <div v-show="activeIndex == '1'">
      <el-form ref="contract" :model="contract" :rules="rules" size="medium" label-width="100px"
               label-position="left">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <el-col :span="3">
              <span>房产信息</span>
            </el-col>
            <el-col :span="2">
              <el-button type="warning" @click="contractPage">收房合同查询</el-button>
            </el-col>
          </div>
          <div>
            <el-col>
              <el-col :span="12">
                <el-form-item label-width="120px" label="小区名称" prop="premiseName">
                  <el-input v-model="contract.premiseName" placeholder="请输入小区名称" readonly clearable
                            :style="{width: '80%'}"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label-width="120px" label="房产信息" prop="houseName">
                  <el-input v-model="contract.houseName" placeholder="请输入房产信息" readonly clearable
                            :style="{width: '80%'}"></el-input>
                </el-form-item>
              </el-col>
            </el-col>
            <el-col>
              <el-col :span="12">
                <el-form-item label-width="120px" label="所有权类型" prop="houseType">
                  <el-select v-model="contract.houseType" placeholder="请选择所有权类型" clearable :style="{width: '80%'}">
                    <el-option v-for="(item, index) in houseTypeOptions" :key="index" :label="item.label"
                               :value="item.value" :disabled="item.disabled"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label-width="120px" label="房产证书编号" prop="houseZsNo">
                  <el-input v-model="contract.houseZsNo" placeholder="请输入房产证书编号" readonly clearable :style="{width: '80%'}">
                  </el-input>
                </el-form-item>
              </el-col>
            </el-col>
            <el-col :span="12">
              <el-form-item label-width="120px" label="产权地址" prop="cqAddress">
                <el-input v-model="contract.cqAddress" placeholder="请输入产权地址" readonly clearable :style="{width: '80%'}">
                </el-input>
              </el-form-item>
            </el-col>
          </div>
        </el-card>

        <!--    业主信息-->
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <el-col :span="3">
              <span>业主信息</span>
            </el-col>
          </div>
          <div>
            <el-col>
              <el-col :span="12">
                <el-form-item label-width="120px" label="业主姓名" prop="ownerName">
                  <el-input v-model="contract.ownerName" placeholder="请输入业主姓名" readonly clearable :style="{width: '80%'}">
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="是否签约人" prop="signWithOwner" required>
                  <el-switch v-model="contract.signWithOwner" :active-value='false' :inactive-value='true'></el-switch>
                </el-form-item>
              </el-col>
            </el-col>
            <el-col>
              <el-col :span="12">
                <el-form-item label-width="120px" label="业主证件类型" prop="certificateType">
                  <el-select v-model="contract.certificateType" placeholder="请选择业主证件类型" readonly clearable
                             :style="{width: '80%'}" default-first-option="default-first-option">
                    <el-option v-for="(item, index) in certificateTypeOptions" :key="index" :label="item.label"
                               :value="item.value" :disabled="item.disabled"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label-width="120px" label="业主证件号码" prop="ownerIdCard">
                  <el-input v-model="contract.ownerIdCard" placeholder="请输入业主证件号码" :style="{width: '80%'}" readonly
                            clearable></el-input>
                </el-form-item>
              </el-col>
            </el-col>
            <el-col>
              <el-col :span="12">
                <el-form-item label-width="120px" label="业主手机号" prop="ownerMobile">
                  <el-input v-model="contract.ownerMobile" placeholder="请输入业主手机号" clearable :style="{width: '80%'}">
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label-width="120px" label="业主联系地址" prop="ownerContactAddress">
                  <el-input v-model="contract.ownerContactAddress" placeholder="请输入业主联系地址" clearable :style="{width: '80%'}">
                  </el-input>
                </el-form-item>
              </el-col>
            </el-col>
            <el-col>
              <el-col :span="12">
                <el-form-item label-width="120px" label="签约人" prop="signUserName" v-if="contract.signWithOwner">
                  <el-input v-model="contract.signUserName" placeholder="请输入签约人" ref="signUserName" clearable
                            :style="{width: '80%'}">
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label-width="120px" label="签约人证件类型" prop="certificateType"
                              v-if="contract.signWithOwner">
                  <el-select v-model="contract.certificateType2" placeholder="请选择签约人证件类型" clearable
                             :style="{width: '80%'}" default-first-option="default-first-option">
                    <el-option v-for="(item, index) in certificateTypeOptions" :key="index" :label="item.label"
                               :value="item.value" :disabled="item.disabled"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-col>
            <el-col>
              <el-col :span="12">
                <el-form-item label-width="120px" label="签约人证件号" prop="signUserIdCard"
                              v-if="contract.signWithOwner">
                  <el-input v-model="contract.signUserIdCard" placeholder="请输入签约人证件号" clearable
                            :style="{width: '80%'}" ref="signUserIdCard"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label-width="120px" label="签约人手机号" prop="signUserMobile"
                              v-if="contract.signWithOwner">
                  <el-input v-model="contract.signUserMobile" placeholder="请输入签约人手机号" clearable
                            :style="{width: '80%'}" ref="signUserMobile"></el-input>
                </el-form-item>
              </el-col>
            </el-col>
            <el-col>
              <el-col :span="12">
                <el-form-item label-width="120px" label="紧急联系电话" prop="signUserEmergencyPhone">
                  <el-input v-model="contract.signUserEmergencyPhone" placeholder="请输入紧急联系电话" clearable :style="{width: '80%'}">
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label-width="120px" label="银行账户类型" prop="accountType">
                  <el-select v-model="contract.accountType" placeholder="请选择银行账户类型" clearable
                             :style="{width: '80%'}">
                    <el-option v-for="(item, index) in accountTypeOptions" :key="index" :label="item.label"
                               :value="item.value" :disabled="item.disabled"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-col>
            <el-col :span="24">

              <el-col :span="12">
                <el-form-item label-width="120px" label="开户省份" prop="bankAccountProvince"
                              v-if="contract.accountType == 1||contract.accountType == 2">
                  <el-select v-model="contract.bankAccountProvince" placeholder="请选择开户省份" clearable
                             :style="{width: '80%'}">
                    <el-option v-for="(item, index) in bankAccountProvinceOptions" :key="index" :label="item.regionName"
                               :value="item.regionId"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label-width="120px" label="银行名称" prop="bankId"
                              v-if="contract.accountType == 1||contract.accountType == 2">
                  <el-select v-model="contract.bankId" placeholder="请选择银行名称" clearable :style="{width: '80%'}"
                             filterable>
                    <el-option v-for="(item, index) in bankIdOptions" :key="index" :label="item.bankName"
                               :value="item.id" :disabled="item.disabled"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-col>

          <el-col>
            <el-col :span="12">
              <el-form-item label-width="120px" label="开户支行" prop="bankOpen" v-if="contract.accountType == 1">
                <el-input v-model="contract.bankOpen" placeholder="请输入开户支行" clearable :style="{width: '80%'}">
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label-width="120px" label="联行行号" prop="bankBranchCodeLh" v-if="contract.accountType == 1">
                <el-input v-model="contract.bankBranchCodeLh" placeholder="请输入联行行号" clearable
                          :style="{width: '80%'}"></el-input>
              </el-form-item>
            </el-col>
          </el-col>
            <el-col>
              <el-col :span="12">
              <el-form-item label-width="120px" label="账户姓名" prop="accountName"
                            v-if="contract.accountType == 1||contract.accountType == 2">
                <el-input v-model="contract.accountName" placeholder="请输入账户姓名" clearable :style="{width: '80%'}">
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label-width="120px" label="银行卡号" prop="bankCard"
                            v-if="contract.accountType == 1||contract.accountType == 2">
                <el-input v-model="contract.bankCard" placeholder="请输入银行卡号" clearable
                          :style="{width: '80%'}"></el-input>
              </el-form-item>
            </el-col>
            </el-col>
          </div>
        </el-card>

        <!--    租约信息-->
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <el-col :span="3">
              <span>租约信息</span>
            </el-col>
          </div>
          <div>
            <el-col :span="24">
              <el-col :span="6">
                <el-form-item label-width="100px" label="租约期限" prop="leaseStartTime">
                  <el-date-picker v-model="contract.leaseStartTime" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                                  :style="{width: '80%'}" placeholder="请选择租约期限开始" clearable></el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label-width="60px" label="-" prop="leaseEndTime">
                  <el-date-picker v-model="contract.leaseEndTime" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                                  :style="{width: '80%'}" placeholder="请选择租约期限结束" clearable></el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label-width="60px">
                  <el-radio-group v-model="during" @change="changeDuring">
                    <el-radio-button :label="1">一年</el-radio-button>
                    <el-radio-button :label="2">二年</el-radio-button>
                    <el-radio-button :label="3">三年</el-radio-button>
                    <el-radio-button :label="4">四年</el-radio-button>
                    <el-radio-button :label="5">五年</el-radio-button>
                  </el-radio-group>
                </el-form-item>
              </el-col>
            </el-col>
            <el-col :span="24">

              <el-col :span="12">
                <el-form-item label-width="120px" label="租金" prop="monthRent">
                  <el-input v-model="contract.monthRent" placeholder="请输入租金" clearable :style="{width: '80%'}">
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label-width="120px" label="房产押金" prop="depositMoney">
                  <el-input v-model="contract.depositMoney" placeholder="请输入房产押金" clearable
                            :style="{width: '80%'}"></el-input>
                </el-form-item>
              </el-col>
            </el-col>
            <el-col :span="24">
              <el-col :span="12">
                <el-form-item label="支付方式  押" prop="depositType">
                  <el-select v-model="contract.depositType" clearable :style="{width: '80%'}">
                    <el-option v-for="(item, index) in depositTypeOptions" :key="index" :label="item.label"
                               :value="item.value" :disabled="item.disabled"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="付" prop="paymentType">
                  <el-select v-model="contract.paymentType" clearable :style="{width: '80%'}">
                    <el-option v-for="(item, index) in paymentTypeOptions" :key="index" :label="item.label"
                               :value="item.value" :disabled="item.disabled"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-col>
            <el-col :span="24">

              <el-col :span="12">
                <el-form-item label="备注">
                  <el-input v-model="contract.remark" type="textarea" placeholder="请输入备注"
                            :autosize="{minRows: 4, maxRows: 4}" :style="{width: '80%'}"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item size="large">
                  <el-button @click="resetForm">重置</el-button>
                  <el-button type="primary" @click="next" style="float: right">下一步</el-button>
                </el-form-item>
              </el-col>
            </el-col>
          </div>
        </el-card>
      </el-form>
    </div>

    <!--    合同附件-->
    <div v-show="activeIndex == '2'">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <el-col :span="3">
            <span>房产证图片</span>
          </el-col>
        </div>
        <div>
          <el-upload
            action="#"
            :before-upload="beforeAvatarUpload"
            :http-request="requestUpload1"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove">
            <i class="el-icon-plus"></i>
          </el-upload>
        </div>
      </el-card>


      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <el-col :span="3">
            <span>收房合同</span>
          </el-col>
        </div>
        <div>
          <el-upload
            action="#"
            :before-upload="beforeAvatarUpload"
            :http-request="requestUpload2"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove">
            <i class="el-icon-plus"></i>
          </el-upload>
        </div>
      </el-card>


      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <el-col :span="3">
            <span>业主身份证明</span>
          </el-col>
        </div>
        <div>
          <el-upload
            action="#"
            :before-upload="beforeAvatarUpload"
            :http-request="requestUpload3"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove">
            <i class="el-icon-plus"></i>
          </el-upload>
        </div>
      </el-card>


      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <el-col :span="3">
            <span>代理人身份证明</span>
          </el-col>
        </div>
        <div>
          <el-upload
            action="#"
            :before-upload="beforeAvatarUpload"
            :http-request="requestUpload4"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove">
            <i class="el-icon-plus"></i>
          </el-upload>
        </div>
      </el-card>


      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <el-col :span="3">
            <span>银行卡信息</span>
          </el-col>
        </div>
        <div>
          <el-upload
            action="#"
            :before-upload="beforeAvatarUpload"
            :http-request="requestUpload5"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove">
            <i class="el-icon-plus"></i>
          </el-upload>
        </div>
      </el-card>


      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <el-col :span="3">
            <span>委托书</span>
          </el-col>
        </div>
        <div>
          <el-upload
            action="#"
            :before-upload="beforeAvatarUpload"
            :http-request="requestUpload6"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove">
            <i class="el-icon-plus"></i>
          </el-upload>
        </div>
      </el-card>


      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <el-col :span="3">
            <span>物业交割单</span>
          </el-col>
        </div>
        <div>
          <el-upload
            action="#"
            :before-upload="beforeAvatarUpload"
            :http-request="requestUpload10"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove">
            <i class="el-icon-plus"></i>
          </el-upload>
        </div>
      </el-card>


      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <el-col :span="3">
            <span>其他</span>
          </el-col>
        </div>
        <div>
          <el-upload
            action="#"
            :before-upload="beforeAvatarUpload"
            :http-request="requestUpload99"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove">
            <i class="el-icon-plus"></i>
          </el-upload>
        </div>
      </el-card>
      <div>
        <el-button type="primary" @click="activeIndex = '3'" style="float: right">下一步</el-button>
        <el-button type="warning" @click="activeIndex = '1',elmenu = true">上一步</el-button>
      </div>
    </div>

    <!--    付款单-->
    <div v-show="activeIndex == '3'">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <el-col :span="3">
            <span>付款单</span>
          </el-col>
        </div>
        <div>
          <el-table
            :data="paymentPlans"
            border
            style="width: 100%">
            <el-table-column
              prop="payNumber"
              label="序号"
              width="60">
            </el-table-column>
            <el-table-column
              prop="payableDate"
              label="应付日期">
            </el-table-column>
            <el-table-column
              label="金额">
              <template slot-scope="scope">
                <p v-if="scope.row.payNumber == 0">押金:</p>
                {{ scope.row.paymentAmount }}元
              </template>
            </el-table-column>
            <el-table-column
              label="税费">
              <template slot-scope="scope">
                {{ scope.row.tax }}元
              </template>
            </el-table-column>
            <el-table-column
              label="付款状态">
              <template slot-scope="scope">
                <p v-if="scope.row.payState==1">未付</p>
                <p v-if="scope.row.payState==2">已付</p>
              </template>
            </el-table-column>
            <el-table-column
              label="房产租金周期"
              width="300">
              <template slot-scope="scope">
                {{ scope.row.paymentDaysBegin }} 至 {{ scope.row.paymentDaysEnd }}
              </template>
            </el-table-column>
            <!--            <el-table-column label="操作">
                          <template slot-scope="scope">
                            <el-button
                              size="mini"
                              @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                          </template>
                        </el-table-column>-->
          </el-table>
        </div>
      </el-card>
      <el-button type="warning" @click="activeIndex = '2'">上一步</el-button>
      <el-button type="primary" style="float: right" @click="saveContract">保存合同</el-button>
    </div>

    <!--    账单修改-->

    <!--    <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
          <el-form :model="payPlan">
            <el-form-item label="活动名称" :label-width="formLabelWidth">
              <el-input v-model="form.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="活动区域" :label-width="formLabelWidth">
              <el-select v-model="form.region" placeholder="请选择活动区域">
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
          </div>
        </el-dialog>-->
  </el-main>

</template>

<script>
import {
  getBankAccountProvinceList,
  getBankIdOptionList,
  getChangeDuring, getPaymentPlanList,
  getToken,
  contractPage, saveContract, upload
} from "@/api/contract/charge/houseinfo";
import {uploadAvatar} from "@/api/system/user";
import store from "@/store";
import Test from "@/views/benjamin/test/test";

export default {
  name: "index",
  components: {Test},
  data() {
    return {
      elmenu: true,
      activeIndex: '1',
      query: {
        current: 1,
        size: 10,
      },
      headers: {Authorization: "Bearer " + getToken()},
      dialogTableVisible: false,
      contracts: [],
      contractsTotal: 0,
      during: undefined,
      contract: {
        lastContractNo: undefined,
        lastContractId: undefined,
        premiseName: undefined,
        houseName: undefined,
        houseType: undefined,
        houseZsNo: undefined,
        cqAddress: undefined,
        signWithOwner: false,
        signUserName: undefined,
        signUserIdCard: undefined,
        signUserMobile: undefined,
        leaseStartTime: null,
        leaseEndTime: null,
        field146: '',
        field147: '',
        field148: '',
        field149: '',
        monthRent: undefined,
        depositMoney: undefined,
        depositType: undefined,
        paymentType: undefined,
        remark: undefined,
        ownerName: undefined,
        certificateType: '身份证',
        certificateType2: '身份证',
        ownerIdCard: undefined,
        ownerMobile: undefined,
        ownerContactAddress: undefined,
        signUserEmergencyPhone: undefined,
        accountType: undefined,
        bankAccountProvince: undefined,
        bankId: undefined,
        bankOpen: undefined,
        bankBranchCodeLh: undefined,
        accountName: undefined,
        bankCard: undefined,
        attachments: []
      },
      //付款单
      paymentPlans: [],
      rules: {
        premiseName: [{ required: true, message: '请选择房产', trigger: 'change' }],
        houseName: [{ required: true, message: '请选择房产', trigger: 'change' }],
        houseType: [{ required: true, message: '请选择所有权类型', trigger: 'change' }],
        houseZsNo: [{ required: true, message: '请输入房产证书编号', trigger: 'blur' }],
        cqAddress: [{ required: true, message: '请输入产权地址', trigger: 'blur' }],
        ownerName: [{ required: true, message: '请输入业主姓名', trigger: 'blur' }],
        certificateType: [{ required: true, message: '请选择业主证件类型', trigger: 'change' }],
        ownerIdCard: [{ required: true, message: '请输入业主证件号码', trigger: 'blur' },
          {
            pattern: /(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}$)/,
            message: "请输入合法身份证号",
            trigger: "blur"
          }
        ],
        ownerMobile: [
          { required: true, message: '请输入业主手机号', trigger: 'blur' },
          {pattern: /^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/, message: "请输入合法手机号/电话号", trigger: "blur"}
        ],
        ownerContactAddress: [{
          required: true,
          message: '请输入业主联系地址',
          trigger: 'blur'
        }],
        signUserName: [{
          required: true,
          message: '请输入签约人',
          trigger: 'blur'
        }],
        signUserIdCard: [{
          required: true,
          message: '请输入签约人证件号',
          trigger: 'blur'
        }, {
          pattern: /(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}$)/,
          message: "请输入合法身份证号",
          trigger: "blur"
        }
        ],
        signUserMobile: [{
          required: true,
          message: '请输入签约人手机号',
          trigger: 'blur'
        }, {pattern: /^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/, message: "请输入合法手机号/电话号", trigger: "blur"}],
        signUserEmergencyPhone: [{
          required: true,
          message: '请输入紧急联系电话',
          trigger: 'blur'
        }, {pattern: /^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/, message: "请输入合法手机号/电话号", trigger: "blur"}],
        accountType: [{
          required: true,
          message: '请选择银行账户类型',
          trigger: 'change'
        }],
        bankAccountProvince: [{
          required: true,
          message: '请选择开户省份',
          trigger: 'change'
        }],
        bankId: [{
          required: true,
          message: '请选择银行名称',
          trigger: 'change'
        }],
        bankOpen: [{
          required: true,
          message: '请输入开户支行',
          trigger: 'blur'
        }],
        bankBranchCodeLh: [{
          required: true,
          message: '请输入联行行号',
          trigger: 'blur'
        }],
        accountName: [{
          required: true,
          message: '请输入账户姓名',
          trigger: 'blur'
        }],
        bankCard: [{
          required: true,
          message: '请输入银行卡号',
          trigger: 'blur'
        }],
        leaseStartTime: [{
          required: true,
          message: '请选择租约期限开始',
          trigger: 'change'
        }],
        leaseEndTime: [{
          required: true,
          message: '请选择结束',
          trigger: 'change'
        }],
        monthRent: [{
          required: true,
          message: '请输入租金',
          trigger: 'blur'
        }],
        depositMoney: [{
          required: true,
          message: '请输入房产押金',
          trigger: 'blur'
        }],
        depositType: [{
          required: true,
          message: '',
          trigger: 'change'
        }],
        paymentType: [{
          required: true,
          message: '',
          trigger: 'change'
        }],

      },
      houseTypeOptions: [{
        "label": "国有房产",
        "value": 1
      }, {
        "label": "直管房产",
        "value": 2
      }, {
        "label": "自管房产",
        "value": 3
      }, {
        "label": "军队房产",
        "value": 4
      }, {
        "label": "集体所有房产",
        "value": 5
      }, {
        "label": "私有(自由)房产",
        "value": 6
      }, {
        "label": "港、澳、台投资房产",
        "value": 7
      }, {
        "label": "涉外房产",
        "value": 8
      }, {
        "label": "其它房产",
        "value": 9
      }],
      certificateTypeOptions: [{
        "label": "身份证",
        "value": "身份证"
      }, {
        "label": "护照",
        "value": "护照"
      }, {
        "label": "台胞证",
        "value": "台胞证"
      }, {
        "label": "港澳通行证",
        "value": "港澳通行证"
      }],
      accountTypeOptions: [{
        "label": "对公账户",
        "value": 1
      }, {
        "label": "对私账户",
        "value": 2
      }],
      bankAccountProvinceOptions: [],
      bankIdOptions: [],
      depositTypeOptions: [{
        "label": "0",
        "value": 0
      }, {
        "label": "1",
        "value": 1
      }, {
        "label": "2",
        "value": 2
      }, {
        "label": "3",
        "value": 3
      }],
      paymentTypeOptions: [{
        "label": "1",
        "value": 1
      }, {
        "label": "2",
        "value": 2
      }, {
        "label": "3",
        "value": 3
      }, {
        "label": "4",
        "value": 4
      }, {
        "label": "5",
        "value": 5
      }, {
        "label": "6",
        "value": 6
      }],
    };
  },
  methods: {
    /*    //编辑付款单
        handleEdit(index, row) {
          console.log(index, row);

        },*/
    addPicture(status) {
      console.log("addPicture", status)
    },
    // 上传图片
    uploadImg() {
      this.$refs.cropper.getCropBlob(data => {
        let formData = new FormData();
        formData.append("file", data);
        uploadAvatar(formData).then(response => {
          this.open = false;
          this.options.img = response.imgUrl;
          store.commit('SET_AVATAR', this.options.img);
          this.$modal.msgSuccess("修改成功");
          this.visible = false;
        });
      });
    },
    // 覆盖默认的上传行为
    requestUpload1(fileObj) {
      this.upload(fileObj, 1)
    },
    // 覆盖默认的上传行为
    requestUpload2(fileObj) {
      this.upload(fileObj, 2)
    },
    // 覆盖默认的上传行为
    requestUpload3(fileObj) {
      this.upload(fileObj, 3)
    },
    // 覆盖默认的上传行为
    requestUpload4(fileObj) {
      this.upload(fileObj, 4)
    },
    // 覆盖默认的上传行为
    requestUpload5(fileObj) {
      this.upload(fileObj, 5)
    },
    // 覆盖默认的上传行为
    requestUpload6(fileObj) {
      this.upload(fileObj, 6)
    },
    // 覆盖默认的上传行为
    requestUpload10(fileObj) {
      this.upload(fileObj, 10)
    },
    // 覆盖默认的上传行为
    requestUpload99(fileObj) {
      this.upload(fileObj, 99)
    },

    //上传
    upload(fileObj, attachmentType) {
      var formData = new FormData()
      formData.append('file', fileObj.file)
      upload(formData, fileObj).then(res => {
        console.log("图片上传", res, fileObj, attachmentType)
        fileObj.onSuccess(res.imgUrl)   // 接口返回成功时处理，调用onSuccess
        this.contract.attachments.push({attachmentType: attachmentType, url: res.imgUrl})
      })
    },
    getToken() {
      getToken().then(res => {
        console.log("token", res)
        this.contract.reserve3 = res.msgData;
      })
    },
    /*    handleSelect(key, keyPath) {
          console.log(key, keyPath);
          this.activeIndex = key;
        },*/
    //获取收房合同列表
    contractPage() {
      contractPage(this.query).then(res => {
        console.log("contractPage: ", res)
        this.contracts = res.msgData.records;
        this.contractsTotal = res.msgData.total
        this.dialogTableVisible = true;
      })
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.query.current = val;
      this.contractPage();
    },
    //选中原合同,内容回显到续约合同
    pitch(index, row) {
      this.contract = row;
      this.contract.lastContractNo = row.sfContractNo;
      this.contract.lastContractId = row.id;
      this.contract.id = undefined;
      this.contract.sfContractNo = undefined;
      this.contract.certificateType = '身份证';
      this.contract.leaseStartTime = row.leaseEndTime;
      this.contract.leaseEndTime = undefined;
      this.contract.attachments = [];
/*      this.contract.premiseName = row.premiseName
      this.contract.houseId = row.houseId;
      this.contract.houseName = row.houseName;
      this.contract.houseLeaseType = row.houseLeaseType;
      this.contract.houseType = row.houseType;
      this.contract.houseZsNo = row.houseZsNo;
      this.contract.cqAddress = row.cqAddress;
      this.contract.ownerId = row.ownerId;
      this.contract.ownerName = row.ownerName;
      this.contract.signWithOwner = row.signWithOwner;
      this.contract.ownerIdCard = row.ownerIdCard;
      this.contract.ownerMobile = row.ownerMobile;
      this.contract.ownerContactAddress = row.ownerContactAddress;
      this.contract.urgMobile = row.urgMobile;*/

      this.dialogTableVisible = false;
    },
    next() {
      console.log("contract", this.contract)
      this.$refs['contract'].validate(valid => {
        if (!valid) {
          //表单校验不通过后, 导航不可用
          this.elmenu = true
          return
        }
        // TODO 提交表单
        //表单校验通过后, 导航可用
        this.elmenu = false
        this.activeIndex = "2";
        getPaymentPlanList(this.contract).then(res => {
          console.log("付款单:", res)
          this.paymentPlans = res.msgData;
          this.contract.paymentPlans = this.paymentPlans;
        })
      })
    },
    resetForm() {
      this.$refs['contract'].resetFields()
    },
    //获取开户行省
    bankAccountProvinceList() {
      getBankAccountProvinceList().then(res => {
        console.log("开户行省", res)
        this.bankAccountProvinceOptions = res.msgData;
      })
    },
    //获取开户行银行
    bankIdOptionList() {
      getBankIdOptionList().then(res => {
        console.log("开户行银行", res)
        this.bankIdOptions = res.msgData;
      })
    },
    //选择租约持续时间
    changeDuring() {
      console.log("租约持续时间(年)", this.during)
      console.log("租约开始时间", this.contract.leaseStartTime)
      this.contract.reserve2 = this.during;
      getChangeDuring(this.contract).then(res => {
        console.log("选择租约持续时间", res)
        this.contract.leaseStartTime = res.msgData.leaseStartTime;
        this.contract.leaseEndTime = res.msgData.leaseEndTime;
      })
    },
    /*    //是否签约改变
        changeSignWithOwner(value){
          if(value == 0){
            this.contract.signUserName = this.contract.ownerName;
            this.contract.signUserIdCard = this.contract.idCard
            this.contract.signUserMobile = this.contract.mobile
          }
        },*/
    //图片附件上传.删除
    handleRemove(file, fileList) {
      console.log("上传.删除")
      console.log(file, fileList);
      //删除
      this.contract.attachments.some((pic, i) => {
        if (pic.url == file.response) {
          this.contract.attachments.splice(i, 1)
          return true;
        }
      })
      console.log("删除后", this.contract.attachments)
    },

    handlePictureCardPreview(file) {
      console.log("handlePictureCardPreview", file)
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    saveContract() {
      saveContract(this.contract).then(res => {
        this.$message.success("保存成功")
        this.$router.push("/contract/chargelist")
      })
    },
    beforeAvatarUpload(file) {
      console.log(file)
      const isLt1M = file.size / 1024 / 1024 < 100;
      if (!isLt1M) {
        this.$message.error('上传头像图片大小不能超过 100MB!');
      }
      return isLt1M;
    }

  },
  created() {
    this.getToken();
    this.bankAccountProvinceList();
    this.bankIdOptionList();
  }
}
</script>

<style scoped>
.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}
</style>
